<template>
	<div id="UserCert">
		<x-header :left-options="{showBack: false}" title="管理员认证" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>

		<div class="cert-content">
			<ul>
				<li>
					<x-input title="所属店铺" type="text" @input="shopnameInput($event)" :value="shop_name" :show-clear="false" placeholder="请输入管理店铺名称" />
				</li>
			</ul>
		</div>

		<div class="cert-content">
			<ul>
				<li>
					<x-input title="真实姓名" @input="usernameInput($event)" type="text" :value="certInfo.identity_name" placeholder="真实姓名" :show-clear="false" />
				</li>
				<li>
					<x-input @input="cardInput($event)" type="text" :value="certInfo.identity_number" title="身份证号" name="card" :show-clear="false" placeholder="请输入您的身份证号"></x-input>
				</li>
				<li>
					<x-input @input="moblieInput($event)" :value="certInfo.identity_mobile" title="手机号码" name="mobile" placeholder="请输入手机号" :show-clear="false" keyboard="number" is-type="china-mobile"></x-input>
				</li>
				<li class="code">
					<input type="text" placeholder="请输入验证码" v-model="smscode" />
					<span @click="verify()" v-model="disabled">{{btntxt}}</span>
				</li>
				<li>
					<x-input title="联系地址" type="text" @input="addressInput($event)" :value="certInfo.identity_address" :show-clear="false" placeholder="请输入联系地址" />
				</li>
			</ul>
			<div class="card-wrap">
				<div class="title-bar">
					<span>身份认证</span>
					<b>(请按示例上传照片)</b>
				</div>
				<ul class="id-list">
					<li id="font_pic">
						<img v-if="certInfo.identity_front_pic" :src="'/los/' + certInfo.identity_front_pic" alt="" />
						<img v-else src="../../assets/images/home/icon_id_font.png" alt="" />
					</li>
					<li class="upload">
						<input type="file" id="file1" class="fileWrap" accept="image/*" />
						<img src="../../assets/images/home/icon_add.png" alt="" />
						<p>请上传正面证件照</p>
					</li>
				</ul>
				<ul class="id-list">
					<li id="back_pic">
						<img v-if="certInfo.identity_back_pic" :src="'/los/' + certInfo.identity_back_pic" alt="" />
						<img v-else src="../../assets/images/home/icon_id_back.png" alt="" />
					</li>
					<li class="upload">
						<input type="file" id="file2" class="fileWrap" accept="image/*" />
						<img src="../../assets/images/home/icon_add.png" alt="" />
						<p>请上传背面证件照</p>
					</li>
				</ul>
			</div>
			<div class="footer-bar">
				<p>您的身份证信息仅供平台审核使用</p>
				<div class="button disable" v-if="certInfo.identity_state == 1">审核通过</div>
				<div class="button" v-else @click="postUserCertInfo">提交申请</div>
			</div>
		</div>
		<loading :show="show1" text="上传中"></loading>
		<toast v-model="success" type="text" width='3.2rem' is-show-mask>{{msg}}</toast>
		<confirm v-model="show4" :show-cancel-button="false" cancel-text="返回" title="个人认证申请提交成功" @on-cancel="onCancel" @on-confirm="onConfirm">
			<p>是否提交店铺资料</p>
		</confirm>
	</div>
</template>

<script>
	import { XHeader, XInput, Toast, PopupPicker, Cell, Loading, Confirm } from 'vux'
	import 'lrz/dist/lrz.all.bundle'
	import $ from 'jquery'
	export default {
		data() {
			return {
				card: '',
				username: '',
				phone: '',
				address: '',
				success: false,
				msg: '',
				certInfo: '',
				shop_name: '',
				shop_id: '',
				show1: false,
				detail_block: '',
				disabled: false,
				shop_logo: '',
				shop_tags: '',
				market_id: 0,
				values: '',
				checked: [],
				radio1: [],
				btntxt: "点击获取",
				urls: '',
				smscode: '',
				time: 0,
				show4: false
			}
		},
		components: {
			XHeader,
			XInput,
			Toast,
			PopupPicker,
			Cell,
			Loading,
			Confirm
		},
		activated() {
			this.getUserCertInfo();
			this.getShopAdmin();
		},
		mounted() {
			//头像
			let _this = this;
			$("#file1").change(function() {
				let that = this;
				_this.show1 = true;
				lrz(that.files[0]).then(function(data) {
					let str = '<li id="font_upload">' +
						'<img src ="' + data.base64 + '"/>' +
						'<input type="hidden" id="images" name="images" value="' + data.base64 + '"/>'; +
					'</li>';
					$('.id-list').find('#font_pic').replaceWith(str);
					_this.show1 = false;
				});
			});
			$("#file2").change(function() {
				let that = this;
				_this.show1 = true;
				lrz(that.files[0]).then(function(data) {
					let str = '<li id="back_upload">' +
						'<img src ="' + data.base64 + '"/>' +
						'<input type="hidden" id="images" name="images" value="' + data.base64 + '"/>'; +
					'</li>';
					$('.id-list').find('#back_pic').replaceWith(str);
					_this.show1 = false;
				})
			});
		},
		methods: {
			//认证后的信息
			getUserCertInfo: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/identity.json',
					data: ''
				}).then((result) => {
					console.log(result);
					if(result.data.code == 1) {
						this.certInfo = result.data.data;
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			getShopAdmin: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/shop_admin.json',
					data: ''
				}).then((result) => {
					if(result.data.code == 1) {

					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//

			//手机验证码部分
			timer() {
				if(this.time > 0) {
					this.time--;
					this.btntxt = this.time + "s后重新获取";
					setTimeout(this.timer, 1000);
					this.disabled = true;
				} else {
					this.time = 0;
					this.btntxt = "点击获取";
					this.disabled = false;
				}
			},
			//点击获取验证码
			verify: function() {
				var reg1 = /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
				if(this.time > 0) {
					return;
				} else if(this.phone == '') {
					this.success = !this.success;
					this.msg = '手机号不为空';
				} else if(!reg1.test(this.phone)) {
					this.success = !this.success;
					this.msg = '手机号不合法';
				} else {
					this.time = 60;
					this.timer();
					let params = {
						tel: this.phone
					}
					this.$http({
						method: 'POST',
						url: '/los/api/member/sms_verify.json',
						data: params
					}).then((result) => {
						this.success = !this.success;
						this.msg = result.data.msg;
					}).catch((err) => {
						console.log(err);
					})
				}

			},
			usernameInput: function(e) {
				this.username = e;
			},
			cardInput: function(e) {
				this.card = e;
			},
			moblieInput: function(e) {
				this.phone = e;
			},
			addressInput: function(e) {
				this.address = e;
			},
			shopnameInput: function(e) {
				this.shop_name = e;
			},
			postUserCertInfo: function() {
				var font_pic = $('#font_upload input').val();
				var back_pic = $('#back_upload input').val();
				var identity_params = {
					identity_name: this.username,
					identity_number: this.card,
					identity_mobile: this.phone,
					sms_code: this.smscode,
					identity_address: this.address,
					identity_front_pic: font_pic,
					identity_back_pic: back_pic,
					identity_info: "申请成为" + this.shop_name + "店铺管理员",

				}
				var reg1 = /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
				if(this.username == '') {
					this.success = !this.success;
					this.msg = '请填写真实姓名';
				} else if(this.card == '') {
					this.success = !this.success;
					this.msg = '请填写身份证号';
				} else if(this.phone == '') {
					this.success = !this.success;
					this.msg = '请填写手机号码';
				} else if(this.address == '') {
					this.success = !this.success;
					this.msg = '请填写联系地址';
				} else if(font_pic == '') {
					this.success = !this.success;
					this.msg = '请上传正面证件照';
				} else if(back_pic == '') {
					this.success = !this.success;
					this.msg = '请上传背面证件照';
				} else if(this.card.length < 18 || this.card == '') {
					this.success = !this.success;
					this.msg = '身份证不合法';
				} else if(!reg1.test(this.phone) || this.phone == "") {
					this.success = !this.success;
					this.msg = '请输入正确手机号'
				} else if(this.shop_name.length > 8) {
					this.success = !this.success;
					this.msg = '店铺名称不得超过8个字'
				} else if(this.smscode == '') {
					this.success = !this.success;
					this.msg = '验证码不正确'
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/member/identity.json',
						data: identity_params
					}).then((result) => {
						console.log(result);
						if(result.data.code == 1) {
							this.success = !this.success;
							this.msg = result.data.msg;
							setTimeout(function() {
								location.href = '#/Certification'
							}, 1000)
						} else {
							this.success = !this.success;
							this.msg = result.data.msg;
						}
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			onConfirm: function() {
				location.href = '#/ShopIntro'
			},
			onCancel: function() {
				location.href = '#/Certification'
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.cert-content {
		background: #fff;
		width: 100%;
		position: relative;
		margin-top: 0.26rem;
		height: 100%;
	}

	.header {
		background: #fff;
	}

	.cert-content:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}

	.cert-content ul {
		width: 100%;
		padding: 0 0.26rem;
	}

	.cert-content>ul li {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		position: relative;
		padding-top: 0.1rem;
	}

	.cert-content>ul li:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 1.3rem;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}

	.cert-content>ul li .weui-cell {
		padding: 0!important;
	}

	.cert-content>ul li input {
		font-size: 0.37rem;
		color: #777;
	}

	.cert-content>ul li span {
		font-size: 0.37rem;
		color: #333;
		width: 2.1rem;
		line-height: 1.3rem;
		display: inline-block;
	}

	.cert-content .card-wrap .title-bar {
		height: 1.3rem;
		line-height: 1.3rem;
		padding: 0 0.26rem;
	}

	.cert-content ul .code input {
		width: 75%;
		height: 100%;
		float: left;
	}

	.cert-content ul .code span {
		float: right;
		background: #aaa;
		color: #fff;
		height: 0.8rem;
		line-height: 0.8rem;
		margin-top: 0.15rem;
		width: 2.2rem;
		text-align: center;
		font-size: 0.28rem;
	}

	.card-wrap .title-bar span {
		font-size: 0.37rem;
		color: #333;
		width: 2.1rem;
		line-height: 1.3rem;
		display: inline-block;
	}

	.card-wrap .title-bar b {
		font-weight: normal;
		font-size: 0.37rem;
		color: #aaa;
	}

	.card-wrap .id-list {
		overflow: hidden;
	}

	.card-wrap .id-list li {
		float: left;
		margin-bottom: 0.45rem;
		position: relative;
	}

	.card-wrap .id-list #upload img {
		width: 4.42rem;
		height: 2.61rem;
		margin-left: 0.61rem;
	}

	.card-wrap .id-list li .fileWrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 4.42rem;
		height: 2.61rem;
		opacity: 0;
	}

	.card-wrap .id-list .upload img {
		width: 0.8rem;
		height: 0.8rem;
		margin: 0.61rem auto 0.4rem;
	}

	.card-wrap .id-list .upload {
		border: dashed 1px #1874da;
		width: 4.42rem;
		height: 2.61rem;
		margin-left: 0.61rem;
		text-align: center;
		border-radius: 0.13rem;
	}
	/*上传身份证图片*/

	.card-wrap .id-list #upload img {
		width: 4.42rem!important;
		height: 2.61rem!important;
		margin-left: 0.61rem;
		border: dashed 1px #1874da;
	}

	.card-wrap .id-list .upload p {
		font-size: 0.32rem;
		color: #333;
	}

	.card-wrap .id-list li img {
		width: 4.42rem;
		height: 2.61rem;
	}

	.footer-bar {
		margin-top: 1.2rem;
		font-size: 0.32rem;
		color: #aaa;
		text-align: center;
	}

	.footer-bar .button {
		width: 9.04rem;
		height: 1.17rem;
		background: #1874da;
		line-height: 1.17rem;
		color: #fff;
		font-size: 0.4rem;
		margin: 0.26rem 0.48rem 0.4rem;
		border-radius: 0.05rem;
	}

	.footer-bar .disable {
		background: #aaa;
	}
</style>
<style>
	.card-wrap .id-list #font_upload,
	.card-wrap .id-list #back_upload {
		width: 4.42rem;
		height: 2.61rem;
		float: left;
	}

	.card-wrap .id-list #font_upload img,
	.card-wrap .id-list #back_upload img {
		width: 100%;
		height: 100%;
	}
</style>
